<template>
  <el-card style="margin: 5px 0px">
    <!--搜索部分-->
    <el-card>
      <el-form inline>
        <el-form-item style="width: 70%">
          <span class="demonstration"></span>
          <el-date-picker
            v-model="dateTimepickUp"
            type="datetimerange"   
            :shortcuts="shortcuts"         
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="datepickup"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="search"></el-button>
          <el-button type="primary" icon="Refresh" @click="reset"></el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <div class="box2">
      <!-- 放置图形图表的容器 -->
      <div class="charts" ref="lineLeft"></div>
      <div class="charts" ref="lineRight"></div>
    </div>
    </el-card>   
  </el-card>
</template>
<script setup lang="ts">
import { ref, reactive,onMounted} from 'vue'
import { reqLine2AvgValueHour } from '@/api/rockpanel'
import * as echarts from 'echarts'
import { rockPanelDto } from '@/api/rockpanel/type'
import { ElMessage } from 'element-plus'

//获取图形图表的DOM的节点
let lineLeft = ref()
let lineRight = ref()
let dateTimepickUp = ref('')
let query = reactive<rockPanelDto>({
  skidNumber: '',
  carType: '',
  carNumber: '',
  eva: '',
  startTime: '',
  endTime: '',
  //orderBy: { prop: '', order: '' },
})
onMounted(async () => {
  //左侧图标
  leftLineChart();
  //右侧趋势图
  rightLineChart();
})

const leftLineChart= async()=>{
  let resultLeft = await reqLine2AvgValueHour('L2L', query)
  chart(resultLeft, lineLeft.value)
}
const rightLineChart= async()=>{
  let resultRingt = await reqLine2AvgValueHour('L2R', query)
  chart(resultRingt, lineRight.value)
}

const chart = (result: any, lineLeft: any) => {
  if (result.code === 200) {
    console.log('----------------------///')
    const xValues = result.data.map((item) => item.x)
    const yValues = result.data.map((item) => item.y)
    let mycharts = echarts.init(lineLeft)
    let option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data:  [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
          smooth: true,
        },
      ],
      //调整图形图表的位置
      grid: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      },
    }
    //设置配置项
    mycharts.setOption(option)
  } else {
    ElMessage.error('获取数据失败')
  }
}
const search = async() => {
   //左侧图标
   leftLineChart();
  //右侧趋势图
  rightLineChart();
}
const reset = () => {
  Object.assign(query, {
    skidNumber: '',
    carType: '',
    carNumber: '',
    eva: '',
    startTime: '',
    endTime: '',
    //orderBy: { prop: '', order: '' },
  })
  //清空时间pickup
  dateTimepickUp.value = ''
  //左侧图标
  leftLineChart();
  //右侧趋势图
  rightLineChart();
}
//时间选择器
const shortcuts = [
{
    text: '今天',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setTime(start.getTime() + 3600 * 1000 * 24 * 1)
      return [start, end]
    },
  },
  {
    text: '昨天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
      return [start, end]
    },
  },
  {
    text: '上周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '上月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '上3个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]


//点击时间选择器确定后传送参数至Query
const datepickup = (value: any) => {
  ; (query.startTime = value[0]), (query.endTime = value[1]), console.log(query)
}
</script>
<style scoped lang="scss">
.box2 {
  width: 100%;
  height: 100%;
  .charts {
    width: 1000px;
    height: 300px;
  }
}
</style>
